<html>
<head>
<title>Ще один цитатник</title>
<meta coding="utf-8">
<link rel="stylesheet" type="text/css" href="/static/style.css" />
<script type="text/javascript" src="/static/jquery.js"></script>
<script>
        //window.location="http://bunyk-laptop:5000/";
	function load_quote(num)
	{
		$("#quote").fadeOut(100,function(){
			$.getJSON("/get"+num,{},function(json){
				if(json)
				{
					$("#quotetext").html(json.text)
					$("#quotelink").attr("href",json.link)
					$("#quoteauthor").html(json.author)
					$("#currentid").html("№"+json.id)
					$("#quote").fadeIn(200)
				}
				else
					quote_text("404, чи щось в тому роді, одним словом нічого не знайдено","Помилка");
			});
		});
	}
	function quote_text(txt,title)
	{
		$("#quote").fadeOut(100,function(){
			$("#quotetext").html(txt)
			$("#quoteauthor").html("")
			$("#currentid").html(title)
			$("#quote").fadeIn(200)
		});
	}
	function show_help()
	{
		quote_text("<ul><li>Кнопки навігації вгорі.</li> \
		<li>Також працює jk-навігація. (Натисніть \"j\"щоб перейти до наступної цитати)</li>\
		","Довідка");
	}
	function move_quote(dir) //Перемістись на dir цитат направо.
	{
			current_quote+=dir;
			if(current_quote>quotes_count) current_quote=2;
			if(current_quote<2) current_quote=quotes_count;
			load_quote(current_quote);
	}
	function move_random()
	{
		current_quote=Math.round(Math.random()*quotes_count-1)+1;
		load_quote(current_quote);
	}
	quotes_count = 0
	current_quote = 1068
	$(document).ready(function(){
		$.getJSON("/count",{},function(json){
			quotes_count = json
			$("#status").html("В базі "+json+" цитат")
			move_random();
		});
		$("#getnext").click(function(event){
			move_quote(+1);
		});
		$("#getprev").click(function(event){
			move_quote(-1);
		});
		$("#getrandom").click(function(event){
			move_random();
		});
		$("#prev10").click(function(event){
			move_quote(-10);
		});
		$("#next10").click(function(event){
			move_quote(+10);
		});
		$("#showhelp").click(function(event){
			show_help();
		});
		$("#show-form").click(function(){
			$("#login-form").slideDown(200);
		});
		$("#hide-form").click(function(){
			$("#login-form").slideUp(200);
		});
		var bgimage=$('<img width="100%" height="100%"/>')
			.attr('src','static/background.jpg') // Preloading the background
			.load(function(){
				$("#page-background").append($(this));
				$("#page-background").fadeIn(10000);
			});
		
	});
	$(document).keydown(function(event){ //jk-navigation
		$("#status").html("Pressed: "+event.which)
		switch(event.which)
		{
			case 32:
			case 74:move_quote(+1); event.preventDefault(); break;// J, SPACE
			case 75:move_quote(-1); break;// K
			case 82:move_random(); break; // R
			case 72:
			case 112:show_help(); event.preventDefault();break; //H,F1
		}
	});
</script>
</head>
<body bgcolor="black" >
<div id="page-content">
<div id="top-row">
	<span id="username">Not logged in...</span>.<span id="show-form">Login.</span>
	<div id="login-form">
		<form action="/login" method="post">
			<input type="text" name="username" />
			<input type="password" name="password" />
			<input type="submit" value="Увійти" />
		</form>
			<button id="hide-form">Скасувати</button>
	</div>
</div>
<br />
<br />
<div id="header">Цитати: <span id="currentid"></span>
<div id="status">Почекайте...</div>
</div>
<div id="navigation">
	<span class="button" id="prev10" title="На десять назад">&lt;&lt; -10</span>
	<span class="button" id="getprev" title="Попередня (k)">&lt;&lt;</span>
	<span class="button" id="getrandom" title="Випадкова (r)">&gt;?</span>
	<span class="button" id="getnext" title="Наступна (j)">&gt;&gt;</span>
	<span class="button" id="next10" title="На десять вперед">+10 &gt;&gt;</span>
	<span class="sep"></span>
	<span class="button" id="upbutton" title="Підняти рейтинг">+</span>
	<span class="button" id="downbutton" title="Опустити рейтинг">-</span>
	<span class="button" id="editbutton" title="Редагувати">Ред.</span>
	<span class="button" id="delbutton" title="Видалити">X</span>
	<span class="sep"></span>
	<span class="button" id="showhelp" title="h/F1">Довідка</span>
</div>
<div id="quote">
	<span id="quotetext">Почекайте...</span></br>
	<a href="" id="quotelink"><span id="quoteauthor"></span></a>
</div>
<div class="footer">
&copy; 2010 <a href="http://bunyk.wordpress.com/">Bunyk Taras</a>.
Content from <a href="http://uk.wikiquote.org/">Вікіцитати</a>.
Server side with <a href="http://flask.pocoo.org/">Flask</a>.
Client side with <a href="http://jquery.com/">jQuery</a>.
</div>
</div>

<div id="page-background"><!--img src="static/background.jpg" width="100%" height="100%"/--></div>
</body></html>
